<!--  -->
<template>
  <div class="reqEditSection">
    <div class="req_content" ref="reqContent">
        <div class="req_content_title" ref="reqcontenttitle">{{reqObj.title}}</div>
        <div class="req_content_list" id="reqcontentlist" ref="reqcontentlist">
            <div v-for="(item , index) in reqObj.questions" :key="index">
                <div class="req_content_item" @click="clickItem(index , item.type)">
                    <div class="req_content_item_name"><span>*</span><span>{{index + 1}}.</span><span>{{item.topic || '标题'}}</span></div>
                    <ul>
                        <li>
                            <el-radio-group v-model="item.value" v-if="item.type == 'radio'">
                                <el-radio :label="radio.value" v-for="(radio , radioIndex) in item.options" :key="radioIndex">{{radio.value || `选项${radioIndex + 1}` }}</el-radio>
                            </el-radio-group>
                            <el-checkbox-group v-model="item.value" v-if="item.type == 'checkbox'">
                                <el-checkbox :label="check.value" v-for="(check , checkIndex) in item.options" :key="checkIndex">{{check.value || `选项${checkIndex + 1}`}}</el-checkbox>
                            </el-checkbox-group>
                            <el-input type="textarea" autosize placeholder="请输入内容" v-model="item.topic" v-if="item.type == 'textarea'"></el-input>
                        </li>
                    </ul>
                    <div class="req_edit_hover" v-if="editIndex + '' != index + ''">
                        <el-button size="mini" icon="el-icon-copy-document" @click.stop="copy(index)">复制</el-button>
                        <el-button size="mini" icon="el-icon-delete" @click.stop="del(index)">删除</el-button>
                        <el-button size="mini" icon="el-icon-top" :disabled="index == 0" @click.stop="moveto('before' , index)">最前</el-button>
                        <el-button size="mini" icon="el-icon-bottom" :disabled="index == reqObj.questions.length - 1" @click.stop="moveto('after' , index)">最后</el-button>
                    </div>
                </div>
                <div class="req_edit_item" v-if="editIndex + '' == index + ''">
                    <div class="req_edit_typeItem" v-if="item.type == 'radio' || item.type == 'checkbox'">
                        <el-input placeholder="请输入内容" v-model="item.topic" clearable>
                            <template slot="prepend">修改标题</template>
                        </el-input>
                        <el-table class="editTable" :data="item.options" style="width: 100%">
                            <el-table-column prop="" label="选项文字">
                                <template slot-scope="{row}">
                                    <el-input v-model="row.value" placeholder="请输入内容"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="200px">
                                <template slot-scope="scope">
                                    <el-button type="text" @click="addmultChoose( index , scope.$index)">添加</el-button>
                                    <el-button type="text" @click="delmultChoose( index , scope.$index)">删除</el-button>
                                    <el-button type="text" :disabled="scope.$index == 0" @click="ascSort(index , scope.$index)">上移</el-button>
                                    <el-button type="text" :disabled="scope.$index == item.options.length - 1" @click="dscSort(index , scope.$index)">下移</el-button>
                                </template>
                                </el-table-column>
                        </el-table>
                        <el-button class="req_edit_button" type="warning" @click="complieForm(index , item.type)">完成编辑</el-button>
                    </div>
                    <div class="req_edit_typeItem" v-if="item.type == 'textarea'">
                        <el-input placeholder="请输入内容" v-model="item.topic" clearable>
                            <template slot="prepend">修改标题</template>
                        </el-input>
                        <el-button class="req_edit_button" type="warning" @click="complieForm(index , item.type)">完成编辑</el-button>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
    <el-button-group class="reqbutton">
        <el-tooltip class="item" effect="dark" content="滚动到顶部" placement="right">
            <el-button type="" icon="el-icon-arrow-up" @click="scrool('up')"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="完成编辑" placement="right">
            <el-button type="" icon="el-icon-check"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="滚动到底部" placement="right">
             <el-button type="" icon="el-icon-arrow-down" @click="scrool('down')"></el-button>
        </el-tooltip>
    </el-button-group>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
export default {
  props: {
    choosItemData:{
        type: Object,
        default() {
            return {}
        }
    }
  },
  data() {
    return {
        editIndex:'',
        reqObj:{
            id: 2,
            title: "问卷调查2",
            state: 0,
            stateName: "未发布",
            time: "2020-09-01",
            questions: [
                {
                    type: "radio",
                    topic: "标题",
                    value:'',
                    options: [
                        {id:'',value:'选项1'},
                        {id:'',value:'选项2'}
                    ]
                },
                {
                    type: "checkbox",
                    topic: "标题",
                    value:[],
                    options: [{id:'',value:'选项1'},{id:'',value:'选项2'}]
                },
                {
                    type: "textarea",
                    topic: "标题",
                    isMandatory: false
                }
            ]
        }
    }
  },
  created() {},
  mounted() {
      this.init()
  },
  methods: {
    // 挂载后添加拖拽事件
    init() {
      this.$nextTick(() => {
        this.initSort()
      })
    },
    initSort() {
      const el = document.getElementById('reqcontentlist')
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost',
        animation:1000,
        dragClass: 'drag',
        forceFallback: false,
        // scroll: true,
        setData: function(dataTransfer) {
          dataTransfer.setData('Text', '')
        },
        // chosenClass: 'chosen',
        onEnd: evt => {
          this.$nextTick(() => {
            let targetObj = this.reqObj.questions.splice(evt.oldIndex, 1)[0]
            this.reqObj.questions.splice(evt.newIndex, 0, targetObj)
            const newArray = this.reqObj.questions.slice(0)
            this.reqObj.questions = []
            this.$nextTick(() => {
              this.reqObj.questions = newArray
              this.editIndex = ''
            })
            console.log(this.reqObj.questions)
            console.log('原来的下标', evt.oldIndex)
            console.log('拖拽后下标', evt.newIndex)
          })
        }
      })
    },
    // 点击切换编辑模式
    clickItem(index , type){
        if(this.editIndex + '' == index + ''){
            this.complieForm(index , type)
        }else{
            this.editIndex = index
        }
    },
    // 添加
    addmultChoose(index , itemIndex){
        this.reqObj.questions[index].options.splice( itemIndex + 1 , 0 , {id:'' , value:`选项${this.reqObj.questions[index].options.length + 1}`})  
    },
    // 删除
    delmultChoose(index , itemIndex){
        console.log(this.reqObj.questions[index].options.length)
        if(this.reqObj.questions[index].options.length > 1){
            this.reqObj.questions[index].options.splice( itemIndex , 1)
        }else{
            this.$message({
              message: '请至少保留1个选项',
              type: 'warning'
            });
        }
    },
    // 上移
    ascSort(index , itemIndex) {
      this.reqObj.questions[index].options[itemIndex] = this.reqObj.questions[index].options.splice( itemIndex - 1, 1, this.reqObj.questions[index].options[itemIndex])[0]
    },
    // 下移
    dscSort(index , itemIndex) {
      this.reqObj.questions[index].options[itemIndex] = this.reqObj.questions[index].options.splice( itemIndex + 1, 1, this.reqObj.questions[index].options[itemIndex])[0]
    },
    // 完成编辑
    complieForm(index , type){
      if(type == 'radio' || type == 'checkbox'){
        if(!this.reqObj.questions[index].topic){
            this.reqObj.questions[index].topic = '标题' 
        }
        this.reqObj.questions[index].options.map((item , i) =>{
            if(!item.value){
                item.value = `选项${i + 1}`
            }
        })
 
      }else if(type == 'textarea'){
        if(!this.reqObj.questions[index].topic){
            this.reqObj.questions[index].topic = '标题' 
        }
      }  
      this.editIndex = ''  
    },
    // 复制
    copy(index){
        let cloneObj = JSON.parse(JSON.stringify(this.reqObj.questions[index]))
        this.reqObj.questions.splice( index + 1, 0 , cloneObj)
    },
    // 删除
    del(index){
        this.reqObj.questions.splice( index , 1)
    },
    // 最前最后
    moveto(type , index){
        if(type == 'before'){
            this.reqObj.questions[index] = this.reqObj.questions.splice( 0 , 1, this.reqObj.questions[index])[0]
            this.scrool('up')
        }else if(type == 'after'){
            this.reqObj.questions[index] = this.reqObj.questions.splice(  this.reqObj.questions.length - 1 , 1, this.reqObj.questions[index])[0]
            this.scrool('down')
        }
    },
    // 滚动
    scrool(type){
        var t = this.$refs.reqcontenttitle.offsetHeight
        var l = this.$refs.reqcontentlist.offsetHeight
        var h = document.documentElement.clientHeight || document.body.clientHeight
        if(type == 'up'){
            this.$refs.reqContent.scrollTop = 0 
        }else if(type == 'down'){
            this.$refs.reqContent.scrollTop = h + l + t
        }
    }
  },
  watch: {
    choosItemData: {
      deep: true,
      handler(now, old) {
        if(now){
            let obj = JSON.parse(JSON.stringify(now))
            obj.topic = '标题'
           this.reqObj.questions.push(obj) 
           this.$nextTick(()=>{
               this.scrool('down')
           })
           
        }
      }
    },
    reqObj: {
      deep: true,
      handler(now, old) {
        if(now){
            this.$emit('changeItem', now)
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep{
    .el-radio{
        margin-bottom: 15px;
    }
    .el-table th{
        background-color: #e8e8e8;
    }
    .el-table td, .el-table th{
        padding: 0;
        padding-top: 10px;
    }
    .el-table__body .el-table__row{
        background-color: #f7f8fa;
    }
    .el-table td, .el-table th.is-leaf{
        border-bottom: 0px solid #eee;
    }
    .cell{
        padding: 0;
        padding-right: 10px;
    }
    .el-table::before{
        height: 0;
    }
}
ul{
    list-style-type: none;
}
.drag {
    background: #000 !important;
    background-image: linear-gradient(#333, #999) !important;
}
.chosen {
    border: solid 2px #3089dc !important;
}
.reqEditSection{
  height: 100%;
  background-color: #fff;
  box-shadow: 0px 0px 4px 0px #dfdfdf;
  margin-left: 10px;
  position: relative;
  .reqbutton{
    position: absolute;
    right: -60px;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 80%;
    justify-content: center;
    margin-left: 10px;
  }
  .req_content{
      height: 100%;
      overflow: auto;
      display: flex;
      flex-direction: column;
      .req_content_title{
        font-size: 24px;
        text-align: center;
        line-height: 80px;  
        border-bottom: 1px solid #eee;  
      }
      .req_content_item{
          padding: 30px 40px 40px;
          border-bottom: 1px solid #eee;
          cursor: move;
          position: relative;
          .req_edit_hover{
            text-align: right;
            padding-right: 20px;
            padding-bottom: 20px;
            display: none;
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100%;
          }
          &:hover{
              .req_edit_hover{
                  display: block;
              }
          }
          ul{
              padding-left: 0;
          }
          .req_content_item_name{
              display: flex;
              flex-direction: row;
              align-items: center;
              span{
                  &:nth-child(1){
                    color: red;
                    font-weight: bold;
                    padding-top: 6px;
                  }
                  &:nth-child(2){
                      margin: 0 5px;
                  }
              }
          }
          
      }
      .req_edit_item{
            background-color: #f7f8fa;
            position: relative;
            padding: 10px 0;
            &::before{
                position: absolute;
                content: '';
                top: -10px;
                left: 60px;
                width:0;
                height:0;
                border-right:10px solid transparent;
                border-left:10px solid transparent;
                border-bottom:10px solid #e8e8e8;
            }
            .req_edit_typeItem{
                display: flex;
                flex-direction: column;
                padding: 0 40px;
                .editTable{
                    margin-top: 10px;
                }
                .req_edit_button{
                    margin-top: 10px;
                }
            }
            
        }
        
  
  }
}
</style>